import { createRouter, createWebHistory } from 'vue-router'
import { ENV } from '@/config'
import { getImportComponent, onAfter, onBefore, onError } from './routes'

const router = createRouter({
  history: createWebHistory(ENV.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'layout',
      component: getImportComponent('layout/LayoutView'),
      redirect: { name: 'home' },
      meta: {
        permissions: []
      },
      children: [
        {
          path: 'home',
          name: 'home',
          component: getImportComponent('home/HomeView'),
          meta: {
            transition: {
              'enter-active-class': 'animate__animated animate__fadeInRight',
              'leave-active-class': 'animate__animated animate__fadeOutRight'
            }
          }
        },
        {
          path: 'role',
          name: 'role',
          component: getImportComponent('role/RoleView')
        },
        {
          path: 'role/save/:id',
          name: 'role-save',
          component: getImportComponent('role/SaveView')
        },
        {
          path: 'role/add',
          name: 'role-add',
          component: getImportComponent('role/SaveView')
        },
        {
          path: 'user',
          name: 'user',
          component: getImportComponent('user/UserView')
        },
        {
          path: 'user/save/:id',
          name: 'user-save',
          component: getImportComponent('user/SaveView')
        },
        {
          path: 'user/add',
          name: 'user-add',
          component: getImportComponent('user/SaveView')
        },
        {
          path: 'permission',
          name: 'permission',
          component: getImportComponent('permission/PermissionView')
        },
        {
          path: 'permission/save/:id',
          name: 'permission-save',
          component: getImportComponent('permission/SaveView')
        },
        {
          path: 'permission/add',
          name: 'permission-add',
          component: getImportComponent('permission/SaveView')
        },
        {
          path: 'static-css/hover',
          name: 'static-css-hover',
          component: getImportComponent('static-css/HoverCssView')
        },
        {
          path: 'static-css/transition',
          name: 'static-css-transition',
          component: getImportComponent('static-css/TransitionView')
        },
        {
          path: 'static-css/loading',
          name: 'static-css-loading',
          component: getImportComponent('static-css/LoadingView')
        }
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: getImportComponent('login/LoginView'),
      meta: {
        permissions: []
      }
    },
    {
      path: '/logout',
      name: 'logout',
      component: getImportComponent('login/LogoutView'),
      meta: {
        permissions: []
      }
    },
    {
      path: '/test-full',
      name: 'test-full',
      component: getImportComponent('login/LoginView'),
      meta: {
        permissions: []
      }
    },
    {
      path: '/waterfall',
      name: 'waterfall',
      component: getImportComponent('layout/waterfall/WaterfallLayoutView'),
      meta: {
        permissions: []
      }
    }
  ]
})

router.beforeEach(onBefore.bind(router))
router.onError(onError)
router.afterEach(onAfter)

export default router
